<div class="ngm-theme-dark dark w-[300px] shrink-0 flex flex-col justify-start overflow-auto bg-bluegray-700 text-white p-4 group">
    <div class="w-full flex justify-start items-center mb-2" cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
      <mat-icon displayDensity="cosy" class="-ml-2 opacity-0 group-hover:opacity-80">drag_indicator</mat-icon>
      <span class="text-lg pointer-events-none">
        {{ 'PAC.ACTIONS.CREATE' | translate: { Default: 'Create' } }}
        {{ 'PAC.KEY_WORDS.Project' | translate: { Default: 'Project' } }}
      </span>
    </div>

    <div class="flex-1">
        <form class="flex flex-col justify-start items-stretch" [formGroup]="form">
        <mat-form-field appearance="fill" floatLabel="always" color="accent">
            <mat-label>{{ 'PAC.Project.Name' | translate: { Default: 'Name' } }}</mat-label>
            <input matInput formControlName="name" required
            placeholder="{{ 'PAC.Project.WhatIsTheName' | translate: { Default: 'What is the name of your project' } }}?"
            />
        </mat-form-field>

        <mat-form-field appearance="fill" floatLabel="always" color="accent">
            <mat-label>
                {{ 'PAC.Project.Description' | translate: { Default: 'Description' } }}
            </mat-label>
            <textarea matInput formControlName="description"
                placeholder="{{ 'PAC.Project.DescriptionPlaceholder' | translate: { Default: 'Optional, desciption of the project' } }}"
            ></textarea>
        </mat-form-field>

        <button></button>
        </form>
    </div>

    <div class="w-full flex justify-end">
        <div ngmButtonGroup>
            <button mat-button mat-dialog-close>
                {{ 'PAC.ACTIONS.CANCEL' | translate: { Default: 'Cancel' } }}
            </button>

            <button
                mat-raised-button
                color="accent"
                [disabled]="form.invalid"
                [matDialogClose]="form.value"
            >
                {{ 'PAC.ACTIONS.CREATE' | translate: { Default: 'Create' } }}
            </button>
        </div>
    </div>
</div>

<div mat-dialog-content class="pac-dialog-content w-[400px] flex flex-col">
    <div class="text-lg px-4 py-2 flex justify-between items-center">
        <span>{{ 'PAC.Project.AddSemanticModels' | translate: { Default: 'Add Semantic Models' } }}</span>
        <pac-inline-search class="ml-2" displayDensity="compact"
            [formControl]="searchControl" (click)="$event.stopPropagation()">
        </pac-inline-search>
    </div>
    <div class="flex-1 overflow-auto">
        <mat-selection-list displayDensity="cosy" [formControl]="models"
            [compareWith]="compareWith">
            <mat-list-option *ngFor="let model of models$ | async" class="rounded-md overflow-hidden"
                [value]="model">
                <span class="whitespace-nowrap text-ellipsis overflow-hidden">{{ model.name }}</span>
            </mat-list-option>
        </mat-selection-list>
    </div>
</div>